<template>
  <div class="container" v-loading="status_loading">
    <el-row>
      <el-form size="large" :model="formInline" :inline="false">
        <el-col :span="12" align="left">
          <el-form-item :label="$t('m.areashift.takeoff')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.takeoffcode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" align="left">
          <el-form-item :label="$t('m.areashift.code')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.areashiftcode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" align="left">
          <el-form-item label="Shift Area Task Detail" :label-width="formLabelWidth">
            <el-input ref="areashiftdetailcode" maxlength="20" show-word-limit @blur="getDetailInfo" v-model="areashiftdetailcode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" align="left">
          <el-form-item label="TakeOff Location" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="sourcelocationcode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button type="primary" @click="save">{{$t('m.save')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <h2 class="title" style="margin-bottom:30px">{{$t('m.areashift.takeinfo')}}</h2>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="table"
          :stripe="true"
          empty-text
          fits
          class="single-select-table"
          :data="tableData"
          :row-style="tableRowStyle"
          :row-class-name="rowClassName"
          @row-click="rowClick"
          @selection-change="handleSingleSelectionChange"
        >
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="areashiftdetailcode" label="Shift Area Task Detail"></el-table-column>
          <el-table-column label="Status" align="center" prop="state">
            <template slot-scope="scope">{{scope.row.detailstate|stateFilter(lan)}}</template>
          </el-table-column>
          <el-table-column label="TakeOff Location" align="center" prop="sourcelocationcode"></el-table-column>
          <el-table-column align="center" prop="productspeccode" label="SKU"></el-table-column>
          <el-table-column align="center" prop="productname" label="ProductName"></el-table-column>
          <el-table-column align="center" prop="productspec" label="Specification"></el-table-column>
          <el-table-column align="center" prop="batchnum" label="BatchNum"></el-table-column>
          <el-table-column align="center" prop="quantity" label="Shift Qty"></el-table-column>
        </el-table>
        <div class="btns">
          <el-button @click="$router.back(-1)">{{$t('m.back')}}</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import common from '@/utils/common'

export default {
  data(){
    return {
      sourcelocationcode:'',
      areashiftdetailcode:'',
      status_loading:false,
      formInline:{},
      tableData:[],
      dialogFormVisible:false,
      formLabelWidth:'180px',
      detail:{}
    }
  },
  watch:{},
  filters:{
    //   1 待处理2待下架3部分下架4已完成
    stateFilter(value, lan){
      return [lan('m.quality.state1'), lan('m.shelves.state5')][value]
    }
  },
  computed:{},
  methods:{
    rowClassName({ row }){
      if (row.areashiftdetailcode === this.areashiftdetailcode){
        return 'warning-row'
      }
      //通过每行的state值判断，如果是2则已经完成，变绿色
      if (row.detailstate == 1){
        return 'success-row'
      }
      return ''
    },
    lan(arg){
      return this.$t(arg)
    },
    getDetailInfo(){
      this.detail={}
      if (this.areashiftdetailcode.replace(/\s+/g, '')){
        this.$axios({
          method:'get',
          url:`/takeoff/detail/tasknumber/`,
          params:{
            tasknumber:this.areashiftdetailcode
          }
        }).then(({data})=> {
          this.detail = data
        })
      }
    },
    getInfo(){
      this.$axios({
        method:'get',
        url:`/takeoff/${this.id}`
      }).then(({data})=> {
        this.formInline = data
        this.tableData = data.detailList
        this.formInline.createdate = common.timestampToTime(
          data.createdate
        )
        this.formInline.createdate = common.timestampToTime(
          data.createdate
        )
        this.status_loading = false
      })
    },
    save(){
      if (!this.areashiftdetailcode){
        this.$message.error(this.$t('m.enter') + 'Shift Area Task Detail')
      } else if (!this.sourcelocationcode){
        this.$message.error(this.$t('m.enter') + 'TakeOff Location')
      } else if (this.detail.sourcelocationcode !== this.sourcelocationcode){
        this.$message.error(this.$t('m.areashift.locationerror'))
      } else {
        this.$axios({
          method:'post',
          url:`/takeoff/detail/${this.detail.detailid}`
        }).then(()=> {
          this.$message.success(this.$t('m.areashift.success'))
          this.areashiftdetailcode=''
          this.sourcelocationcode=''
          this.$refs.areashiftdetailcode.focus()
          this.getInfo()
        })
      }
    },
    print(){}
  },
  created(){
    this.status_loading = true
    this.id = this.$route.query.id
    this.opt = this.$route.query.opt
    if (this.id){
      this.getInfo()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>